import React from 'react';
import HeadNavComponent from "../../../components/headNav";
import {Switch,Toast } from 'antd-mobile';
import request from '../../../assets/js/utils/request';
import Css from '../../../assets/css/home/reg/index.css';
export default class RegIndex extends React.Component{
    constructor(){
        super();
        this.state={
            checked:false,
            sPhonecode:'',
            bCodeVerification:false,
            sVerification:'获取短信验证码',
            bVerification:'',
            bPassword:'',
            bStyle:'password'
        };
        this.timer=null;
        this.bSentCode=true;
        this.sumbit=true
    }
    componentDidMount(){
        document.getElementById('title').innerHTML='注册';
        document.getElementById('keywords').content='员工福利方案,员工礼品,中秋新年礼品,企业福利平台,企业福利定制';
        document.getElementById('description').content='关爱通是中智旗下品牌，央企服务保证，提供完整员工福利解决方案，企业福利平台定制，为企业提供春节、端午、中秋、新年等各节日员工礼物，以及生日福利、员工激励发放，员工体检，一站式弹性福利平台。售前咨询:400-920-6969';
    }
    //解决内存泄漏
    componentWillUnmount(){
        clearInterval(this.timer)
        this.setState=(state,callback)=>{
            return ;
        }
    }
    //点击改变密码显示格式
    changeSwitch(){
        this.setState({checked:!this.state.checked},()=>{
            if (this.state.checked){
                this.setState({bStyle:'text'})
            }else {
                this.setState({bStyle:'password'})
            }
        })
    }
    //输入手机号
    changePhoneCode(e){
        if(this.bSentCode){
            this.setState({sPhonecode:e.target.value},()=>{
                if(this.state.sPhonecode.match(/^1[0-9][0-9]{9}/)){
                    this.setState({bCodeVerification:true})
                }else {
                    this.setState({bCodeVerification:false})
                }
            })
        }
    }
    //输入验证码
    changeVerification(e){
        this.setState({bVerification:e.target.value})
    }
    //输入密码
    changePassword(e){
        this.setState({bPassword:e.target.value})
    }
    //点击获取验证码
    async getVerification(){
        this.changeBPhone();
        if(this.bSentCode && this.state.sPhonecode.match(/^1[0-9][0-9]{9}/)){
            //await 解决异步，逻辑是异步数据同步进行，异步还是存在
            let resData=await this.changeBPhone();
            if(resData.code===200){
                if(resData.data.isreg === '1'){
                    Toast.info('你输入的手机号已经注册',2);
                    return false;
                }
            }
            this.bSentCode=false;
            let iTime=10;
            this.setState({sVerification:'重新获取('+iTime+')s',bCodeVerification:false})
            this.timer=setInterval(()=>{
                if (iTime>0){
                    iTime--;
                    this.setState({sVerification:'重新获取('+iTime+')s'})
                }else {
                    clearInterval(this.timer);
                    this.bSentCode=true;
                    this.setState({bCodeVerification:true})
                    this.setState({sVerification:'获取短信验证码'})
                }
            },1000)
        }
    }
    //检测手机是否注册
    changeBPhone(){
        let bUrl= window.base.config.baseUrl+'/home/user/isreg?token='+window.base.config.token;
        return request(bUrl,'post',{username:this.state.sPhonecode}).then((res)=>{
            return res;
        })
    }
    //注册提交
        //async 解决异步，逻辑是异步数据同步进行，异步还是存在
    async Submit(){
        if (this.state.sPhonecode.match(/^\s*$/)) {
            Toast.info('请输入手机号',2);
            return false;
        }
        if (!this.state.sPhonecode.match(/^1[0-9][0-9]{9}/)) {
            Toast.info('请输入正确的手机号',2);
            return false;
        }
        //await 解决异步，逻辑是异步数据同步进行，异步还是存在
        let resData=await this.changeBPhone();
        if(resData.code===200){
            if(resData.data.isreg === '1'){
                Toast.info('你输入的手机号已经注册',2);
                return false;
            }
        }
        if (this.state.bVerification.match(/^\s*$/)) {
            Toast.info('请输入验证码',2);
            return false;
        }
        if (this.state.bPassword.match(/^\s*$/)) {
            Toast.info('请输入密码',2);
            return false;
        }
       if (this.sumbit){
           this.sumbit=false;
           let sUrl=window.base.config.baseUrl+'/home/user/reg?token='+window.base.config.token,
               data={vcode:this.state.bVerification,cellphone:this.state.sPhonecode,password:this.state.bPassword};
           request(sUrl,'post',data).then((res)=>{
               if (res.code===200){
                   this.props.history.goBack();
               }
           })
       }
    }
    render(){
        return(
            <div>
                <HeadNavComponent title={'会员注册'} > </HeadNavComponent>
                <div class={Css['main']}>
                    <div className={Css['grop']+' mt20'}>
                        <div className={Css['col_border']+' '+Css['w42']}>
                            <input type='tel' placeholder='请输入手机号' onChange={this.changePhoneCode.bind(this)}></input>
                        </div>
                        <div className={this.state.bCodeVerification?Css['col_code']+' '+Css['acdive']:Css['col_code']} onClick={this.getVerification.bind(this)}>{this.state.sVerification}</div>
                    </div>
                    <div className={Css['grop']+' mt20'}>
                        <div className={Css['col_border']}>
                            <input type='text' placeholder='请输入短信验证码' onChange={this.changeVerification.bind(this)}></input>
                        </div>
                    </div>
                    <div className={Css['grop']+' mt20'}>
                        <div className={Css['col_border']}>
                            <input className={Css['w54']} type={this.state.bStyle} placeholder='请输入密码' onChange={this.changePassword.bind(this)}></input>
                            <div className={Css['col_switch']}>
                                <Switch checked={this.state.checked} onClick={this.changeSwitch.bind(this)}></Switch>
                            </div>
                        </div>
                    </div>
                    <div className={Css['grop']+' mt20'}>
                        <div className={Css['col_btn']} onClick={this.Submit.bind(this)}>注册</div>
                    </div>
                </div>
            </div>
        )
    }
}